<!-- 监测问题统计 -->
<div class="jcwttj">
  <div nz-row>
    开始时间：
    <nz-date-picker [(ngModel)]="queryParam._begindate" nzFormat="yyyy-MM-dd" [nzAllowClear]="'true'">
    </nz-date-picker>
    结束时间：
    <nz-date-picker [(ngModel)]="queryParam._enddate" nzFormat="yyyy-MM-dd" [nzAllowClear]="'true'">
    </nz-date-picker>
    <button style="margin-left:10px;" nz-button nzType="primary" (click)="getTjInfo()">查询</button>
  </div>
  <div nz-row class="mt10 bgwhite">
    <div nz-col nzSpan="16">
      <ng-container *ngTemplateOutlet="table_bjwttjTemp"></ng-container>
    </div>
    <div nz-col nzSpan="8">
      <div id="chart_bjwttj" style="width:100%;height:500px"></div>
    </div>
  </div>

</div>

<ng-template #table_bjwttjTemp>
  <nz-table #nzTable_bjwttj [nzScroll]="lockHeadScroll" [nzData]="table_bjwttj.data" [nzLoadingDelay]="1000" nzBordered
    [nzShowPagination]="false" [nzFrontPagination]="false" [nzNoResult]="''" nzSize="small">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="10%">序号</th>
        <th nzAlign="center">部门</th>
        <th nzAlign="center" nzWidth="10%">I 级报警</th>
        <th nzAlign="center" nzWidth="10%">II 级报警</th>
        <th nzAlign="center" nzWidth="10%">III 级报警</th>
        <th nzAlign="center" nzWidth="10%">报警数量</th>
        <th nzAlign="center" nzWidth="10%">占比</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of nzTable_bjwttj.data;index as i">
        <!-- 序号 -->
        <td nzAlign="center">{{+i + 1}}</td>
        <!-- 部门 -->
        <td nzAlign="center">{{data.ID}}</td>
        <!-- I级报警 -->
        <td nzAlign="center">{{data.I}}</td>
        <!-- II级报警 -->
        <td nzAlign="center">{{data.II}}</td>
        <!-- III级报警 -->
        <td nzAlign="center">{{data.III}}</td>
        <!-- 报警数量 -->
        <td nzAlign="center">{{data.C}}</td>
        <!-- 占比 -->
        <td nzAlign="center">{{data.PERCENT}}</td>
      </tr>
    </tbody>
  </nz-table>
</ng-template>